<script setup>
import { ref, reactive, watch } from "vue";
import { onShow, onReachBottom } from "@dcloudio/uni-app";
import { request } from "@/common/http";
import { ApiUrl } from "@/common/ApiUrl";
import { jumpPage, Toast } from "@/utils";
import NavBar from "../../components/NavBar.vue";
import Item from "./Item.vue";
/* 设备列表 */
let machineList = ref([]);
let machine = ref({
	/* 页码 */
	pageNum: 1,
	/* 每页显示的数量 */
	pageSize: 10,
	/* 总共多少页数据 */
	pageCount: 1,
	/* 是否在线 1 在线设备 0 离线设备 */
	network: -1,
	/* 是否故障 1 故障设备 0 完整设备 */
	fault: -1,
	/* 是否需要补货 1 需要补货 0 无需补货 */
	supplement: -1,
	/* 设备编号 */
	machineNo: "",
})
/* 当前登录的用户 */
let userInfo = ref({});
/* 是否显示添加设备弹窗 */
let showAddMachinePopup = ref(false);
/* 添加设备弹窗表单字段 */
let addMachine = ref({
	/* 设备数量 */
	count: null,
	/* 主板IMEI */
	imeis: null,
});
const state = reactive({
	/* 顶部状态栏的高度 */
	navHeight: 0,
	/* 是否在线 */
	netWorkText: "是否在线",
	/* 是否显示是否在线筛选框 */
	networkVisible: false,
	networkList: [
		{
			id: 1,
			name: "在线设备"
		},
		{
			id: 0,
			name: "离线设备"
		}
	],
	/* 是否故障 */
	faultText: "是否故障",
	/* 是否显示是否故障筛选框 */
	faultVisible: false,
	faultList: [
		{
			id: 1,
			name: "故障设备"
		},
		{
			id: 0,
			name: "完整设备"
		}
	],
	/* 补货状态 */
	supplementText: "补货状态",
	/* 是否显示补货状态筛选框 */
	supplementVisible: false,
	supplementList: [
		{
			id: 1,
			name: "需要补货"
		},
		{
			id: 0,
			name: "无需补货"
		}
	],
})

onShow(() => {
	const user = JSON.parse(uni.getStorageSync("user"));
	userInfo.value = user.userInfo;
	/* 获取设备列表 */
	getMachineList();
})

/* 上拉加载 */
onReachBottom(() => {
	machine.value.pageNum++;
	if (machine.value.pageNum < machine.value.pageCount + 1 && (machine.value.pageCount != 1)) {
		/* 获取设备列表 */
		getMachineList();
	} else {
		/* 没有数据了 */
	}
})

/* 设备型号搜索框搜索按钮点击事件 */
const handleSearch = () => {
	if (!machine.value.machineNo) return Toast("请先输入设备型号");
	/* 获取设备列表 */
	getMachineList();
}

/* 是否在线按钮点击事件 */
const handleNetworkClick = () => {
	state.networkVisible = !state.networkVisible;
	state.faultVisible = false;
	state.supplementVisible = false;
}

/* 是否在线按钮点击事件 */
const handleSelectNetwork = (item) => {
	state.netWorkText = item.name;
	machine.value.network = item.id;
	/* 重置数据 */
	handleReset();
	/* 获取设备列表 */
	getMachineList();
}

/* 是否故障按钮点击事件 */
const handleFaultClick = () => {
	state.faultVisible = !state.faultVisible;
	state.networkVisible = false;
	state.supplementVisible = false;
}

/* 选择设备故障状态 */
const handleSelectFault = (item) => {
	state.faultText = item.name;
	machine.value.fault = item.id;
	/* 重置数据 */
	handleReset();
	/* 获取设备列表 */
	getMachineList();
}

/* 补货状态按钮点击事件 */
const handleSupplementClick = () => {
	state.supplementVisible = !state.supplementVisible;
	state.networkVisible = false;
	state.faultVisible = false;
}

/* 选择设备补货状态 */
const handleSelectSupplement = (item) => {
	state.supplementText = item.name;
	machine.value.supplement = item.id;
	/* 重置数据 */
	handleReset();
	/* 获取设备列表 */
	getMachineList();
}

/* 添加设备按钮点击事件 */
const handleAddMachine = () => {
	showAddMachinePopup.value = true;
	addMachine.value.count = null;
	addMachine.value.imeis = null;
}


/* 添加设备弹窗确定按钮点击事件 */
const handleAddMachinePopupConfirm = () => {
	if (!addMachine.value.count) return Toast("请先输入设备数量");
	if (!addMachine.value.imeis) return Toast("请先输入主板IMEI");
	/* 判断是否存在该IMEI */
	request({
		url: `${ApiUrl.isExistsImei}`,
		method: 'post',
		data: {
			imeis: addMachine.value.imeis
		}
	}).then(res => {
		if (res.code == 200) {
			/* 不存在IMEI-调用添加机器接口 */
			request({
				url: `${ApiUrl.MachineUrl}/add`,
				method: "post",
				data: {
					count: addMachine.value.count
				}
			}).then(result => {
				/* 调用保存IMEI接口 */
				request({
					url: `${ApiUrl.saveImei}`,
					method: 'post',
					data: {
						imeis: addMachine.value.imeis
					}
				}).then(result1 => {
					if (result1.code == 200) {
						Toast("添加成功");
						showAddMachinePopup.value = false;
						machineList.value = [];
						/* 获取设备列表 */
						getMachineList();
					}
				})
			})
			
		} else {
			Toast(res.message)
			
		}
	})
	
}

/* 获取设备列表 */
const getMachineList = () => {
	request({
		url: `${ApiUrl.MachineUrl}/list?pageNum=${machine.value.pageNum}`,
		method: 'post',
		data: {
			...machine.value
		}
	}).then(res => {
		if (machine.value.machineNo) {
			/* 重置数据 */
			handleReset();
		}
		machineList.value = machineList.value.concat(res.data.list);
		machine.value.pageCount = res.data.pages;
	})
}

/* 重置数据 */
const handleReset = () => {
	machineList.value = [];
	machine.value.pageNum = 1;
}

/* 监听设备型号输入框 */
watch(() => machine.value.machineNo, (val) => {
	if (!val) {
		machine.value.pageNum = 1;
		machineList.value = [];
		//* 获取设备列表 */
		getMachineList();
	}
})
</script>

<template>
  <view class="machine_list">
    <NavBar v-model:navHeight="state.navHeight">
      <template v-slot:center>
        <view class="search">
          <view class="input">
            <image mode="widthFix" class="icon" src="/static/image/navbar/search.png" @click="handleSearch" />
            <input v-model.trim="machine.machineNo" placeholder="这里输入设备型号" />
          </view>
          <view v-if="userInfo.id == 1" class="add" @click="handleAddMachine">
						<image src="/static/image/icon/icon_add.png" mode="aspectFill"></image>
						添加设备
					</view>
        </view>
      </template>
    </NavBar>
		<view class="filter">
		  <view class="filter_item" :class="{ active: state.networkVisible }" @click="handleNetworkClick">
		    {{ state.netWorkText }}
		    <view v-if="state.networkVisible" class="filter_list">
		      <view v-for="item in state.networkList" :key="item.id" @click="handleSelectNetwork(item)">{{ item.name }}</view>
		    </view>
		  </view>
		  <view class="filter_item" :class="{ active: state.faultVisible }" @click="handleFaultClick">
		    {{ state.faultText }}
		    <view v-if="state.faultVisible" class="filter_list">
					<view v-for="item in state.faultList" :key="item.id" @click="handleSelectFault(item)">{{ item.name }}</view>
		    </view>
		  </view>
		  <view class="filter_item" :class="{ active: state.supplementVisible }" @click="handleSupplementClick">
		    {{ state.supplementText }}
		    <view v-if="state.supplementVisible" class="filter_list">
					<view v-for="item in state.supplementList" :key="item.id" @click="handleSelectSupplement(item)">{{ item.name }}</view>
		    </view>
		  </view>
		</view>
    <scroll-view scroll-y="true">
      <view v-if="machineList.length > 0" class="list">
        <Item v-for="item in machineList" :item="item" :key="item.id"/>
      </view>
			<view v-else class="no_machine">暂无数据</view>
    </scroll-view>
		<!-- 添加设备弹窗 -->
		<u-popup :show="showAddMachinePopup" mode="center" :round="16">
			<view class="popup add_machine_popup">
				<view class="popup_title">添加设备</view>
				<view class="popup_row">
					<text>设备数量：</text>
					<input v-model.trim="addMachine.count" type="number" placeholder="请输入设备数量">
				</view>
				<view class="popup_row">
					<text>主板IMEI：</text>
					<textarea v-model.trim="addMachine.imeis" cols="30" rows="10" placeholder="请输入主板IMEI,多个主板IMEI请使用逗号（,）隔开!"></textarea>
				</view>
				<view class="popup_footer">
					<view @click="showAddMachinePopup = false">取消</view>
					<view @click="handleAddMachinePopupConfirm">确定</view>
				</view>
			</view>
		</u-popup>
  </view>
</template>

<style lang='scss'>
.machine_list {
	box-sizing: border-box;
	.m-nav {
		.nav {
			.center {
				left: unset !important;
				transform: translate(10%, -50%) !important;
			}
		}
	}
	.filter {
		position: fixed;
		z-index: 99;
		top: calc(v-bind('state.navHeight') * 1px);
	  width: 100%;
	  height: 88rpx;
	  background: #FFFFFF;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  box-shadow: inset 0 -1rpx 0 0 #EBEEF1;
		border-top: 1px solid #EBEEF1;
	  padding: 0 45rpx;
	  box-sizing: border-box;
	  .filter_item {
	    position: relative;
	    font-weight: bold;
	    padding: 0 20rpx;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    font-size: 28rpx;
			color: #303030;
			&.active {
				color: #ff4638;
				&::after {
					border-top: 15rpx solid #ff4638;
				}
			}
	    &::after {
	      content: '';
	      position: relative;
	      margin-left: 10rpx;
	      border-top: 15rpx solid #303030;
	      border-left: 10rpx solid transparent;
	      border-right: 10rpx solid transparent;
	    }
	    .filter_list {
	      position: absolute;
	      top: 62rpx;
	      white-space: nowrap;
	      box-shadow: 0 8rpx 16rpx 0 rgba(48, 48, 48, 0.15);
	      width: 185rpx;
	      padding: 24rpx 0;
				background: #ffffff;
				box-sizing: border-box;
	      view {
	        width: 100%;
	        padding: 12rpx 0;
	        text-align: center;
					color: #303030;
					font-size: 28rpx;
					line-height: 33rpx;
	      }
	    }
	  }
	}
	.add {
	  font-size: 24rpx;
	  color: #FF9832;
	  line-height: 32rpx;
	  margin-left: 10rpx;
	  white-space: nowrap;
	  display: flex;
		align-items: center;
	  flex-wrap: nowrap;
		image {
			width: 24rpx;
			height: 24rpx;
		}
	}
	.list {
	  padding: 32rpx;
	  display: flex;
	  flex-direction: column;
	  row-gap: 24rpx;
		padding: calc(v-bind('state.navHeight') * 1px + 54px) 32rpx 32rpx;
	}
	.no_machine {
		font-size: 24rpx;
		line-height: 36rpx;
		color: #969699;
		text-align: center;
		margin-top: 240rpx;
	}
	.add_machine_popup {
		width: 560rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		box-sizing: border-box;
		padding: 40rpx 0 0;
		.popup_row {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 0 30rpx;
			text {
				font-size: 24rpx;
				line-height: 28rpx;
				color: #353535;
			}
			input {
				flex: 1;
				height: 64rpx;
				font-size: 24rpx;
				line-height: 28rpx;
				border: 2rpx solid rgba(#999999, 0.5);
				box-sizing: border-box;
				padding: 0 20rpx;
			}
			textarea {
				flex: 1;
				font-size: 24rpx;
				line-height: 28rpx;
				border: 2rpx solid rgba(#999999, 0.5);
				box-sizing: border-box;
				padding: 20rpx;
				margin: 20rpx 0 50rpx;
			}
		}
	}
	.popup {
		.popup_title {
			font-weight: 500;
			font-size: 32rpx;
			line-height: 38rpx;
			color: #353535;
			letter-spacing: 1px;
			text-align: center;
			margin-bottom: 40rpx;
		}
		.popup_footer {
			width: 100%;
			height: 112rpx;
			border-top: 2rpx solid rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			view {
				height: 100%;
				flex: 1;
				font-weight: 500;
				font-size: 32rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				&:last-child {
					color: #FF4638;
					border-left: 2rpx solid rgba(0, 0, 0, 0.1);
				}
			}
		}
	}
}
</style>